<template>
  <div id="schemeManage">
    <el-card class="box-card" style="margin:15px">
      <div style="margin-bottom:10px">
        <el-button size="small" type="primary" icon="el-icon-document-checked" @click="clickAdd">增加</el-button>
        <el-button size="small" @click="getList(basicData)">刷新</el-button>
      </div>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%;padding:5px;"
        :header-cell-style="{
          background: '#333333',
          color: '#ffffff',
          textAlign: 'center'
        }"
      >
        <el-table-column align="center" type="index" />
        <el-table-column align="center" prop="schemeName" label="方案名称" />
        <el-table-column align="center" prop="list" label="质控指标">
          <template slot-scope="scope">
            <span>
              {{scope.row.list.join(',')}}
            </span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="updateTime" label="操作时间">
          <template slot-scope="scope">
            <span>{{ scope.row.updateTime?scope.row.updateTime.substr(0, 10):'' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="schemeStatus.data" label="状态" />
        <el-table-column align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              style="background:#2669F3"
              @click="clickEdit(scope.row)"
            >修改</el-button>
            <el-button
              size="mini"
              type="primary"
              style="background:#2669F3"
              @click="clickDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="basicData.current"
        :page-size="basicData.size"
        :total="total"
        layout="slot, total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <!-- 新增 -->
    <el-dialog :visible.sync="addShow" width="80%" title="新增">
      <el-form
        ref="projectManageForm"
        :model="addData"
        :rules="basicDataRules"
        label-width="120px"
        size="small"
        style="width: 100%;"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="名称：" prop="schemeName">
              <el-input size="mini" v-model="addData.schemeName" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="实验项目：" prop="experimentCode.key">
              <el-col :span="24">
                <el-radio-group v-model="addData.experimentCode.key" border="true" size="small">
                  <el-radio
                    v-for="(item, key, index) in dicts.EXPERIMENT_CODE"
                    :key="index"
                    :label="key"
                    :value="key"
                  >{{ item }}</el-radio>
                </el-radio-group>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="类型：" prop="schemeType.key">
              <el-radio-group v-model="addData.schemeType.key" border="true" size="small">
                <el-radio
                  v-for="(item, key, index) in dicts.INDICATOR_PROPERTY"
                  :key="index"
                  :label="key"
                  :value="key"
                >{{ item }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="启用：" prop="schemeStatus.key">
              <el-radio-group v-model="addData.schemeStatus.key" border="true" size="small">
                <el-radio
                  v-for="(item, key, index) in dicts.SCHEME_STATUS"
                  :key="index"
                  :label="key"
                  :value="key"
                >{{ item }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24" id="add-table">
            <el-table
              v-loading="editLoading"
              :data="editTableData"
              :header-cell-style="{
                background: '#333333',
                color: '#ffffff',
                textAlign: 'center'
              }"
              @selection-change="selectChanage"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column align="center" type="index" />
              <el-table-column align="center" prop="code" label="指标编码" />
              <el-table-column align="center" prop="name" label="指标名称" />
              <el-table-column align="center" prop="indicatorMethod.data" label="所属方法" />
              <el-table-column align="center" prop="indicatorProperty.data" label="所属类型" />
              <el-table-column align="center" prop="sortValue" label="排序号" />
              <el-table-column align="center" prop="memo" label="指标备注" />
            </el-table>
            <span
              style="font-weight: 400;color:#606266;padding: 15px 0;display: block;1px solid #e8e8e8;"
            >
              已选中
              <span style="color:#1818e6;font-weight: 700;">
                {{
                editSelectList.length
                }}
              </span>
              条，共计
              <span>{{ editTableData.length }}</span> 条结果
            </span>
          </el-col>
        </el-row>
        <div class="flex" style="margin-top:40px">
          <el-button
            type="primary"
            size="mini"
            style="background:#2669F3;width:120px"
            @click="clickSeave"
          >确定</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!-- 修改 -->
    <el-dialog :visible.sync="editShow" width="80%" title="修改">
      <el-form
        ref="projectManageForm"
        :model="editData"
        :rules="basicDataRules"
        label-width="120px"
        size="small"
        style="width: 100%;"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item label="名称：" prop="schemeName">
              <el-input size="mini" v-model="editData.schemeName" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="实验项目：" prop="schemeType.key">
              <el-col :span="24">
                <el-radio-group v-model="editData.experimentCode.key" border="true" size="small">
                  <el-radio
                    v-for="(item, key, index) in dicts.EXPERIMENT_CODE"
                    :key="index"
                    :label="item"
                    :value="key"
                  >{{ item }}</el-radio>
                </el-radio-group>
              </el-col>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="类型：" prop="schemeType.key">
              <el-radio-group v-model="editData.schemeType.key" border="true" size="small">
                <el-radio
                  v-for="(item, key, index) in dicts.INDICATOR_PROPERTY"
                  :key="index"
                  :label="item"
                  :value="key"
                >{{ item }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="启用：" v-model="editData.schemeStatus.key" prop="schemeStatus.key">
              <el-radio-group v-model="editData.schemeStatus.key" border="true" size="small">
                <el-radio
                  v-for="(item, key, index) in dicts.SCHEME_STATUS"
                  :key="index"
                  :label="item"
                  :value="key"
                >{{ item }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24" id="add-table">
            <el-table
              ref="editTableRef"
              v-loading="editLoading"
              :data="editTableData"
              :header-cell-style="{
                background: '#333333',
                color: '#ffffff',
                textAlign: 'center'
              }"
              @selection-change="selectChanage"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column align="center" type="index" />
              <el-table-column align="center" prop="code" label="指标编码" />
              <el-table-column align="center" prop="name" label="指标名称" />
              <el-table-column align="center" prop="indicatorMethod.data" label="所属方法" />
              <el-table-column align="center" prop="indicatorProperty.data" label="所属类型" />
              <el-table-column align="center" prop="sortValue" label="排序号" />
              <el-table-column align="center" prop="memo" label="指标备注" />
            </el-table>
            <span
              style="font-weight: 400;color:#606266;padding: 15px 0;display: block;1px solid #e8e8e8;"
            >
              已选中
              <span style="color:#1818e6;font-weight: 700;">
                {{
                editSelectList.length
                }}
              </span>
              条，共计
              <span>{{ editTableData.length }}</span> 条结果
            </span>
          </el-col>
        </el-row>
        <div class="flex" style="margin-top:40px">
          <el-button
            type="primary"
            size="mini"
            style="background:#2669F3;width:120px"
            @click="clickEditSeave"
          >确定</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import QualityManageApi from "@/api/QualityManage.js";
import { initDicts } from "@/utils/commons";
export default {
  data() {
    return {
      // 转菊花
      loading: false,
      // 修改转菊花
      editLoading: false,
      // 增加弹窗
      addShow: false,
      // 修改弹窗
      editShow: false,
      // 总数
      total: 0,
      // 表格数据
      tableData: [],
      // 质控列表选中数据
      editSelectList: [],
      // 质控指标列表
      editTableData: [],
      // 弹窗form表单数据
      basicData: {
        current: 1,
        map: {},
        model: {
          code: "",
          experimentCode: {
            data: "",
            key: ""
          },
          indicatorMethod: {
            data: "",
            key: ""
          },
          indicatorProperty: {
            data: "",
            key: ""
          },
          name: "",
          schemeId: 0,
          sortValue: 0
        },
        order: "descending",
        size: 10,
        sort: "id"
      },
      // 新增
      addData: {
        experimentCode: {
          data: "",
          key: "THA"
        },
        indicatorIds: [],
        schemeName: "",
        schemeStatus: {
          data: "",
          key: "enable"
        },
        schemeType: {
          data: "",
          key: "carnitine"
        }
      },
      // 修改数据
      editData: {
        experimentCode: {
          data: "",
          key: ""
        },
        indicatorIds: [],
        schemeName: "",
        schemeStatus: {
          data: "",
          key: ""
        },
        schemeType: {
          data: "",
          key: ""
        }
      },
      basicDataRules: {
        code: [{ required: true, message: "   ", trigger: "change" }],
        name: [{ required: true, message: "   ", trigger: "change" }],
        "indicatorMethod.key": [
          { required: true, message: "   ", trigger: "change" }
        ],
        "indicatorProperty.key": [
          { required: true, message: "   ", trigger: "change" }
        ]
      },
      // 字典
      dicts: {
        INDICATOR_METHOD: {}, //质控方法
        SCHEME_STATUS: {}, //状态
        EXPERIMENT_CODE: {}, //实验项目
        INDICATOR_PROPERTY: {} //类型
      }
    };
  },
  mounted() {
    initDicts(
      [
        "INDICATOR_METHOD",
        "INDICATOR_PROPERTY",
        "SCHEME_STATUS",
        "EXPERIMENT_CODE"
      ],
      this.dicts
    );
    this.getList(this.basicData);
  },
  methods: {
    // 选中数据
    selectChanage(v) {
      this.editSelectList = v;
    },
    // 获取数据
    getList(data) {
      this.loading = true;
      QualityManageApi.schemeManage.page(data).then(res => {
        if (res.status == "200") {
          this.tableData = res.data.data.records;
          this.total = res.data.data.total;
          this.loading = false;
        } else {
          this.$message.error(res.statusText);
        }
      });
    },
    // 点击增加
    clickAdd() {
      this.addShow = true;
      this.editLoading = true;
      this.addData = {
        experimentCode: {
          data: "",
          key: "THA"
        },
        indicatorIds: [],
        schemeName: "",
        schemeStatus: {
          data: "",
          key: "enable"
        },
        schemeType: {
          data: "",
          key: "carnitine"
        }
      };
      let data = {
        current: 1,
        map: {},
        model: {
          code: "",
          experimentCode: {
            data: "",
            key: ""
          },
          indicatorMethod: {
            data: "",
            key: ""
          },
          indicatorProperty: {
            data: "",
            key: ""
          },
          name: ""
        },
        order: "descending",
        size: 50,
        sort: "id"
      };

      QualityManageApi.targetManage.page(data).then(res => {
        if (res.status == "200") {
          this.editTableData = res.data.data.records;
          this.editLoading = false;
        } else {
          this.$message.error(res.statusText);
        }
      });
    },
    // 点击修改
    clickEdit(v) {
      this.editData = JSON.parse(JSON.stringify(v));
      this.editShow = true;
      this.editLoading = true;
      let data = {
        current: 1,
        map: {},
        model: {
          code: "",
          experimentCode: {
            data: "",
            key: ""
          },
          indicatorMethod: {
            data: "",
            key: ""
          },
          indicatorProperty: {
            data: "",
            key: ""
          },
          name: ""
        },
        order: "descending",
        size: 50,
        sort: "id"
      };
      let that = this;
      this.editTableData = [];
      QualityManageApi.targetManage.page(data).then(res => {
        if (res.status == "200") {
          res.data.data.records.forEach((item, index) => {
            if (that.editData.list.indexOf(item.name) > -1) {
              that.editTableData.push(item);
              that.$refs.editTableRef.toggleRowSelection(item); //选中
            }
          });
          that.editLoading = false;
        } else {
          that.$message.error(res.statusText);
        }
      });
    },
    // 点击删除
    clickDelete(v) {
      this.$confirm("是否删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        QualityManageApi.schemeManage.delete({ "ids[]": v.id }).then(res => {
          if (res.status == "200") {
            this.getList(this.basicData);
            this.$message({
              type: "success",
              message: "删除成功!"
            });
          } else {
            this.$message.error(res.statusText);
          }
        });
      });
    },
    // 新增保存
    clickSeave() {
      this.editSelectList.forEach(item => {
        this.addData.indicatorIds.push(item.id);
      });
      this.$refs.projectManageForm.validate(valid => {
        if (valid) {
          QualityManageApi.schemeManage.add(this.addData).then(res => {
            if (res.status == "200") {
              this.$message({
                type: "success",
                message: "新增成功!"
              });
              this.addShow = false;
              this.getList(this.basicData);
            } else {
              this.$message.error(res.statusText);
            }
          });
        } else {
          //   console.log('error submit!!')
          return false;
        }
      });
    },
    // 修改保存
    clickEditSeave() {
      let data = {
        experimentCode: this.editData.experimentCode,
        id: this.editData.id,
        indicatorIds: [],
        isDel: this.editData.isDel,
        schemeName: this.editData.schemeName,
        schemeStatus: this.editData.schemeStatus,
        schemeType: this.editData.schemeType
      };
      this.editSelectList.forEach(item => {
        data.indicatorIds.push(item.id);
      });
      this.$refs.projectManageForm.validate(valid => {
        if (valid) {
          QualityManageApi.schemeManage.edit(data).then(res => {
            if (res.status == "200") {
              this.$message({
                type: "success",
                message: "修改成功!"
              });
              this.editShow = false;
              this.getList(this.basicData);
            } else {
              this.$message.error(res.statusText);
            }
          });
        } else {
          //   console.log('error submit!!')
          return false;
        }
      });
    },
    // 点击分页
    handleSizeChange: function(val) {
      this.basicData.size = val;
      this.getList(this.basicData);
    },
    // 选择页码
    handleCurrentChange: function(currentPage) {
      this.basicData.current = currentPage;
      this.getList(this.basicData);
    }
  }
};
</script>

<style lang="less">
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
#schemeManage {
  .el-form-item__content{
    height: 40px;
  }
  #add-table {
    .el-table {
      height: 300px;
      overflow: auto;
    }
  }
  .el-dialog__header {
    .flex;
    background: #2669f3;
    .el-dialog__title {
      color: #fff;
    }
    .el-dialog__headerbtn .el-dialog__close {
      color: #ffffff;
    }
  }
  .el-dialog__body {
    .flex;
    flex-direction: column;
    .top-list {
      width: 65%;
      .col {
        margin: 15px 0;
      }
    }
  }
  .acceptance-dialog {
    max-height: 265px;
    overflow: auto;
  }
  .but-form {
    margin: 20px 0;
  }
}
</style>
